.main{
    width:970px;
    margin:auto;
}
.header{
    margin: 10px;
    border-style: outset;
    border-width: thin;
    height: 200px;
    background-color: #9B79FF;
    box-shadow:8px 8px 5px #ccc;
}
#navi{
        margin: 10px;       
        border:1px;
	background-color:activeborder;
	height:34px;	
        box-shadow:8px 8px 5px #ccc;
        text-align:center; 
}
.content{
    margin: 10px;
    border-style: outset;
    border-width: thin;
    height: 800px;
    background-color:#9B79FF;
    box-shadow:8px 8px 5px #ccc;
}
#content-left{
    margin: 5px 0px 5px 5px;
    background-color: #66FF66;
    border-style: solid; 
    border-width: 0px;
    width: 180px; 
    height: 790px;
    float:left;
     box-shadow:2px 2px 5px #ccc;
}
.content-main{
    margin: 5px 0px 5px 5px;
    background-color: #FFCC66;
    border-style: solid;
    border-width: 0px;
    width: 565px; 
    height: 790;
    float:left;
    overflow:hide;
}
.content-right{
    margin: 5px 0px 5px 5px;
    background-color: #66FF66;
    border-style: solid;
    border-width: 0px;
    width: 180px;
    height: 790px;
    float:left;
}
.footer{
    margin: 10px;
    border-style: outset;
    border-width: thin;
    height: 200px;
    background-color: #9B79FF;
    box-shadow:8px 8px 5px #ccc;
    clear:both;
}

#navi ul
{
	list-style:none;	
}
#navi ul li
{
	position:relative;
	float:left;
        
        
}
#navi li a
{
	text-decoration:none;
	color:blue;
	padding: .1cm 15px;
	font-size: 20px;	
	display:block;
        color:blueviolet; 
	border:1px solid #fff;
	border-color:#def #678 #345 #cde;
        
}
#navi li ul{
        
	position:absolute;
	display:none;
}
#navi li:hover ul
{
    display:block;
  
}
#navi ul li a:hover
{ 
    top:1px;
    left:1px;
    color:#fff;
    border-color:#345 #cde #def #678;
    background-color:#ccc;
}
#navi ul li a:active
{
    font-weight:bold;}
.a1 a:link
{			
	border:1px solid;
	width:6cm;
}
.a1 a:hover
{
	color:black;
	background-color:#ccc;
}
.a1 li
{
    background-color:activeborder;
    font-family:Georgia, "Times New Roman", Times, serif;
}

#content-left ul {
	margin: 2px;
	padding: 0px;
	list-style: none;
	width: 170px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
        border-right: 7px solid #cecece;

	}
	
#content-left ul li {
	position: relative;
	}
#content-left li a
{
	text-decoration:none;
	color:blue;
	padding: .1cm 15px;
	font-size: 20px;	
	display:block;
        
}
#content-left li:hover ul
{
    display:block;
  
}
#content-left ul li a:hover
{ 
    top:1px;
    left:1px;
    color:#fff;
    border-color:#345 #cde #def #678;
    background-color:#ccc;
    border-right: 7px solid red;
}
#content-left li ul {
	position: absolute;
	left: 170px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
#content-left ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc; /* IE6 Bug */
	border-bottom: 0;
	}
	
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#content-left li:hover ul,#content-left li.over ul { display: block; } /* The magic */
